/**
*@author ymhui
*@createTime 05 17:58
*@description
*/
<template>
  <div :id="genId()" :style="style"></div>
</template>

<script>
    const eCharts = require('echarts');
    import {mapActions, mapGetters} from 'vuex';

    export default {
        name: "Gauge",
        props: {
            index: null,
            factor: Object,
            isFullScreen: Boolean
        },
        computed: {
            ...mapGetters([
                'sewageSystem',
                'area'
            ])
        },
        data() {
            return {
                myChart: '',
                latestValue: {},
                timeTask: null,
                style:"height:12em"
            }
        },
        methods: {
            ...mapActions([
                'getSewageLatestValueAct'
            ]),
            getOption() {
                return {
                    series: [{
                        name: '业务指标', // 参数
                        type: 'gauge',
                        min: this.factor.minValue || 0, // 参数
                        max: this.factor.maxValue || 10, // 参数
                        // splitNumber: 11,
                        radius: '95%',  // 设置仪表盘大小
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10,
                            }
                        },
                        axisLabel: {            // 坐标轴小标记
                            // show: false,
                            textStyle: {       // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 10,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 3,
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {           // 分隔线
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5,
                            width: 4
                        },
                        title: {
                            padding: [
                                130,  // 上
                                0, // 右
                                5,  // 下
                                0, // 左
                            ],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 15,
                                // fontStyle: 'italic',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail: {
                            // backgroundColor: 'rgba(30,144,255,0.8)',
                            // borderWidth: 1,
                            // borderColor: '#fff',
                            bottom: '20',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5,
                            fontSize: 15,
                            offsetCenter: [0, '75%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data: [{value: this.latestValue.value, name: this.factor.name || '默认'}] // 参数
                    },
                    ]
                };
            },
            genId() {
                return "gauge-" + this.index;
            },
            async init() {
                return this.getSewageLatestValueAct({
                    sewageId: this.area.sewageId,
                    systemCode: this.sewageSystem.systemCode,
                    factorCode: this.factor.code
                });
            },
            initChart() {
                this.init().then((latestValue) => {
                    this.latestValue = latestValue;
                    let Chart = document.getElementById(this.genId());
                    Chart.removeAttribute("_echarts_instance_");
                    this.myChart = eCharts.init(Chart);
                    this.myChart.setOption(this.getOption(), true);
                }).catch(error => {
                    console.error(error)
                })
            },
            chartTimeTask() {
                this.timeTask = setInterval(() => {
                    console.log('执行最新数据刷新任务');
                    this.initChart();
                }, 1000 * 180);
            },
            wrapStyle() {
                if (this.isFullScreen) {
                    this.style = "height:14em;";
                } else {
                    this.style = "height:12em;";
                }
            }
        },
        watch: {
            isFullScreen(oldValue, newValue) {
                if (oldValue !== newValue) {
                    this.wrapStyle();
                }
            }
        },
        mounted() {
            this.initChart();
            this.chartTimeTask();

        },
        beforeDestroy() {
            clearInterval(this.timeTask);
        }
    }
</script>

<style scoped>

</style>
